<template>
    <div class="hcontent">
        <h2>发表评论</h2>
        <hr>
        <textarea v-model="mess" rows="2" placeholder="请输入要BB的内容（最多吐槽120字）"></textarea>
        <mt-button type="primary" size="large" @click.native="handleClick">发表评论</mt-button>
        <div class="ccontent">
            <div v-for="(item,i) in lisComent" :key="i">
                <p class="c_title">第{{i+1}}用户：{{item.user_name}} 发表时间:{{item.add_time|timeformat}}</p>
                <p class="ls_content">{{item.content}}</p>
            </div>
        </div>
        <mt-button type="danger"  plain size="large" @click.native="gen">更多评论</mt-button>
    </div>
</template>

<script>
import {Toast }from "mint-ui"
export default {
    //父组件传递过来的参数
    props:["id"] ,
    data(){
        return{
            page:1,
            lisComent:[],
            mess:""
        }
    },
    methods:{
        async getcoment(){
           const {data} = await this.axios.get(
            "/api/getcomments/" + this.id + "?pageindex=" + this.page
           );
           if(data.status===0){this.lisComent= this.lisComent.concat(data.message)}
        },
        handleClick(){
            this.submit();
        },
        async submit(){
            //提交评论如果内容为空那么弹出提示框
            if(this.mess.trim().length<=0){return Toast("请输入内容")
            }
            const {data} = await this.axios.post
            (
           "/api/postcomment/" + this.id ,
           {
               content:this.mess.trim()
            }
            );
           if(data.status===0){

                //评论已经提交了，只要刷新本地评论就可以了，我们可以在本地手动添加一个对象 
               this.lisComent.unshift({
                  user_name:"匿名用户" ,
                  add_time:new Date(),
                  content:this.mess
               })
           }
           this.mess='';
        },
        gen(){
            this.page++;
            this.getcoment();
        }
    },
    created(){
        this.getcoment();
    }

}
</script>
<style  scoped>
textarea{
    font-size: 13px;
}
h2{
    font-size: 20px;
    font-weight: 800;
}
.c_title{
    font-size: 14px;
    background: #ddd;
}
.ccontent{
    line-height: 30px;
    margin-top: 5px;
}
.ls_content{
    font-size: 13px;
    text-indent: 2em;
}
</style>